<template>
	<div class="all">
		<div class="top">
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">用户</div>
				<div class="f2">
					<van-field v-model="person.name" placeholder="请填写姓名" />
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">手机号</div>
				<div class="f2">
					<van-field v-model="person.mobile" type="tel" placeholder="请填写手机号" />
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">验证码</div>
				<div class="f2">
					<div class="inp">
						<van-field v-model="person.code"  placeholder="请输入验证码" />
						<van-button class="inpa" size="small" @click="getcode" :disabled="use">{{countname}}</van-button>
					</div>
				</div>
			</div>

			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">性别</div>
				<div class="f2" style="display: flex; align-items: center; padding-left: 16px;">
					<van-radio-group v-model="person.sex" direction="horizontal">
						<van-radio name="1">男</van-radio>
						<van-radio name="2">女</van-radio>
					</van-radio-group>
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">拍摄签名</div>
				<div class="f2">
					<van-field v-model="person.autograph" placeholder="请填写拍摄签名" />
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1" @click="where = true">地址</div>
				<div class="f2"  @click="where = true">
					<div v-if="person.city == ''" style="padding: 10px 16px; font-size: 14px; line-height: 24px; color: rgb(185, 188, 194);">请选择地址</div>
					<div v-if="person.city != ''" style="padding: 10px 16px; font-size: 14px; line-height: 24px; color: #323233;">{{person.city}}</div>
					<!-- <van-field v-model="person.city"  @click="where = true" disabled placeholder="请选择地址" /> -->
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">详细地址</div>
				<div class="f2">
					<van-field v-model="person.address" placeholder="请填写详细地址" />
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">紧急联系人</div>
				<div class="f2">
					<van-field v-model="person.sos_name" placeholder="请填写紧急联系人" />
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">紧急联系方式</div>
				<div class="f2">
					<van-field v-model="person.sos_mobile" type="tel" placeholder="请填写紧急联系方式" />
				</div>
			</div>
			<div class="flex" style="border-bottom: 1px #F4F6F8 solid;">
				<div class="f1">身份证号码</div>
				<div class="f2">
					<van-field v-model="person.id_num" placeholder="请填写身份证号码" />
				</div>
			</div>
			<div class="hei k1" style="line-height: 44px;">身份证</div>
			<div class="flex flexb">
				<div>
					<van-uploader :after-read="afterRead">
						<div v-if="person.id_image_front == ''" class="shenfenimg"><img
								src="../../static/img/sfz_0.png"></div>
						<div v-if="person.id_image_front != ''" class="shenfenimg"><img :src="person.id_image_front">
						</div>
						<div style="text-align: center; margin-top: 0.2rem; color: #B9BCC2; font-size: 0.28rem;">身份证正面
						</div>
					</van-uploader>

				</div>
				<div>
					<van-uploader :after-read="afterRead2">
						<div v-if="person.id_image_reverse == ''" class="shenfenimg"><img
								src="../../static/img/sfz_1.png"></div>
						<div v-if="person.id_image_reverse != ''" class="shenfenimg"><img
								:src="person.id_image_reverse"></div>
						<div style="text-align: center; margin-top: 0.2rem; color: #B9BCC2; font-size: 0.28rem;">身份证反面
						</div>
					</van-uploader>
				</div>
			</div>
			<!-- <div class="inp">
				<van-field v-model="person.nickName" disabled />
			</div>
			<div class="hei k1">原手机号</div>
			<div class="inp" v-if="person.phone != ''">
				<van-field v-model="person.phone" disabled />
			</div>
			<div class="hei k1">手机号</div>
			<div class="inp">
				<van-field v-model="all.phone" placeholder="正常使用可接受验证码的手机号" />
			</div>
			<div class="hei k1">验证码</div>
			<div class="inp">
				<van-field v-model="all.code" placeholder="请输入验证码" />
				<van-button class="inpa" size="small" @click="getcode" :disabled="use">{{countname}}</van-button>
			</div> -->
			<div class="k2 btn" @click="zhuce">注册摄影师</div>
		</div>
		<van-popup v-model="ing">
			<van-loading size="24px" color="#fff" vertical>加载中...</van-loading>
		</van-popup>
		<van-popup v-model="where" position="bottom">
			<van-area title="选择省市区" :area-list="areaList" @confirm="onConfirm" @cancel="onCancel" />
		</van-popup>

	</div>
</template>

<script>
	import axios from 'axios'
	import {
		areaList
	} from '@vant/area-data';
	export default {
		name: 'genghuan',
		data() {
			return {
				fileList: [],
				where: false,
				all: {
					phone: "",
					code: ""
				},
				areaList: areaList,
				countname: "获取验证码",
				count: 30,
				use: false,
				person: {
					name: "",
					sex: '1',
					mobile: "",
					autograph: "",
					city: "",
					address: "",
					sos_name: "",
					sos_mobile: "",
					id_num: "",
					id_image_front: "",
					id_image_reverse: "",
					code:""
				},
				ing: false
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {

			// this.getyonghu()
		},
		methods: {
			daojishi:function(){

				this.use = true
				this.dao = setInterval(()=>{
					if(this.count > 0){
						this.count --
						this.countname = this.count + '秒后重新获取'
					}else{
						this.count = 30
						this.countname = '获取验证码'
						clearInterval(this.dao)
						this.use = false
					}
				},1000)
			},
			getcode:function(){
				if(this.person.mobile == ''){
					return false
				}
				this.axios.post(this.urls + `/auth/sms_code`,{mobile:this.person.mobile})
					.then(response => {

						if(response.data.msg.code == 0){

							this.$toast('验证码已发送');
							this.daojishi()
						}else{
							this.$toast(response.data.msg.info);
						}
					})
			},
			afterRead(file) {
				var that = this
				axios.get(this.urls+'/system/qiniu/upload-token?bucket=rockysports')
					.then(response => {
						var qiniudata = new FormData();
						qiniudata.append('file', file.file);
						qiniudata.append('token', response.data.data);
						axios.post('https://upload.qiniup.com', qiniudata)
							.then(response => {
								if (response.data.msg.code == 0) {
									this.person.id_image_front = 'https://cdn.rockysports.cn/' + response.data.data.fkey
								} else {
									this.$toast(response.data.msg.info);
								}
							})
					})

			},
			afterRead2(file) {
				var that = this
				axios.get(this.urls+'/system/qiniu/upload-token?bucket=rockysports')
					.then(response => {
						var qiniudata = new FormData();
						qiniudata.append('file', file.file);
						qiniudata.append('token', response.data.data);
						axios.post('https://upload.qiniup.com', qiniudata)
							.then(response => {
								if (response.data.msg.code == 0) {
									this.person.id_image_reverse = 'https://cdn.rockysports.cn/' + response.data.data.fkey
								} else {
									this.$toast(response.data.msg.info);
								}
							})
					})

			},

			zhuce: function() {
				if(this.person.name == '' || this.person.sex == '' || this.person.mobile == '' || this.person.autograph == '' || this.person.city == '' || this.person.address == '' || this.person.sos_name == '' || this.person.sos_mobile == '' || this.person.id_num == ''  || this.person.id_image_front == '' || this.person.id_image_reverse == ''){
					this.$toast('请完整填写信息再进行注册！');
					return false
				}

				this.axios.post(this.urls + `/photographer/register`, {
					name: this.person.name,
					sex: this.person.sex,
					mobile: this.person.mobile,
					code: this.person.code,
					autograph: this.person.autograph,
					city: this.person.city,
					address: this.person.address,
					sos_name: this.person.sos_name,
					sos_mobile: this.person.sos_mobile,
					id_num: this.person.id_num,
					id_image_front: this.person.id_image_front,
					id_image_reverse: this.person.id_image_reverse,
				}).then((response) => {
					if (response.data.msg.code == 0) {
						this.$toast('已提交审核，请等待或者联系官方审核！');
						this.$router.push('/')
					} else {
						this.$toast(response.data.msg.info);
					}
				})
			},
			onCancel: function() {
				this.where = false
			},
			onConfirm: function(value, index) {
				this.person.city = value[0].name + value[1].name + value[2].name
				this.where = false
			},
			getyonghu: function() {
				this.axios.get(this.urls + `/mobile/api/getCountInfo`)
					.then(response => {
						this.person = response.data.result
						this.ing = false
					})
			},

			genggai: function() {
				if (this.all.phone == '' || this.all.code == '') {
					this.$toast('请输入手机号和验证码');
					return false
				}
				this.axios.post(this.urls + `/mobile/api/bandPhone?code=${this.all.code}&phone=${this.all.phone}`)
					.then(response => {

						if (response.data.success == true) {
							this.$toast('已绑定手机号');
							setTimeout(() => {
								this.$router.push('/')
							}, 1000)
						} else {
							this.$toast(response.data.msg.info);
						}
					})
			},
		},

	}
</script>

<style scoped lang="less">
	.van-field__control:disabled{ color:#323233}
	.van-popup {
		background: transparent;
	}
	.van-button--default{ border: 0;}
	.van-cell:not(:last-child)::after{border: 0;}
	.van-loading__text {
		color: #FFFFFF;
	}

	.all {
		background: #FFFFFF;
		font-size: 0.28rem;
		min-height: 100vh;

		.f1 {
			width: 2rem;
			line-height: 44px;
			font-size: 0.28rem;
			color: #2D3038;
		}

		.f2 {
			width: 4.9rem;
		}

		.top {}

		.shenfenimg {
			width: 3.3rem;
			height: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;

			img {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.k1 {
			margin-bottom: 0.3rem;
		}

		.k3 {
			color: #FF6367;
			margin-bottom: 0.2rem;
		}

		.k2 {
			margin: 0.5rem 0;
		}

		.van-field {}

		.red {
			color: #FF6367;
			font-size: 0.28rem;
			margin: 0 0.05rem;
		}

		.inp {
			position: relative;
			font-size: 0.28rem;
		}

		.inpa {
			position: absolute;
			right: 0.1rem;
			top: 7px;
			color: #FFFFFF;
			background: #FFB300;
			padding: 0 0.2rem;
			// border-radius: 0.1rem;
			// font-size: 0.28rem;
			// line-height: 30px;
		}
	}
</style>
